<template>
  <div class="content">
    <div class="userInfo">
      <div class="name">
        <label for="name">昵称:</label>
        <input
          v-model="config.nickname"
          :class="nameConfig.error ? 'name-border' : ''"
          @input="nameChange"
          id="name"
          type="text"
          placeholder=""
        />
        <div v-if="nameConfig.error" class="name-error">
          <i class="iconfont">&#xe626;</i>
          <span>昵称2-15汉字，且不包含除_和-的特殊字符。</span>
        </div>
      </div>
      <div class="info">
        <label for="info">介绍:</label>
        <textarea
          :class="signatureConfig.error ? 'textarea-error' : ''"
          v-model="config.signature"
          @input="infoChange"
          id="info"
          cols="30"
          rows="10"
          class="text-area"
        ></textarea>
        <p class="warning">{{ signatureConfig.textCount }}</p>
      </div>
      <div class="sex">
        <span class="margin-right">性别:</span>
        <input
          :checked="config.gender == 1 ? true : false"
          type="radio"
          value="男"
          name="sex"
          id="sex1"
        />
        <label for="sex1">男</label>
        <input
          :checked="config.gender == 2 ? true : false"
          type="radio"
          value="女"
          name="sex"
          id="sex0"
        />
        <label for="sex0">女</label>
        <input
          :checked="config.gender == 0 ? true : false"
          type="radio"
          value="保密"
          name="sex"
          id="sex2"
        />
        <label for="sex2">保密</label>
      </div>
      <div class="birthday">
        <label class="label-text" for="birthday">生日:</label>
        <div class="select-icon">
          <select id="year" v-model="birthdayConfig.year" @change="selectYear">
            <option
              v-for="item in birthdayConfig.yearList"
              :key="item"
              :value="item"
            >
              {{ item }}
            </option>
          </select>
          <div class="icon" @click="domClick('#year', $event)">
            <i class="iconfont">&#xe652;</i>
          </div>
        </div>
        <span>年</span>
        <div class="select-icon">
          <select
            id="month"
            style="padding-left: 10px"
            @change="selectMonth"
            v-model="birthdayConfig.month"
          >
            <option
              v-for="item in birthdayConfig.monthList"
              :key="item"
              :value="item"
            >
              {{ item }}
            </option>
          </select>
          <div class="icon" @click="domClick('#month', $event)">
            <i class="iconfont">&#xe652;</i>
          </div>
        </div>
        <span>月</span>

        <div class="select-icon">
          <select
            id="day"
            style="padding-left: 10px"
            @change="selectDay"
            v-model="birthdayConfig.day"
          >
            <option
              v-for="item in birthdayConfig.dayList"
              :key="item"
              :value="item"
            >
              {{ item }}
            </option>
          </select>
          <div class="icon" @click="domClick('#day', $event)">
            <i class="iconfont">&#xe652;</i>
          </div>
        </div>
        <span>日</span>
      </div>

      <div class="save-button">
        <button @click="save" class="blue-button">保存</button>
      </div>
    </div>
    <div class="picture">
      <div class="img-box">
        <img :src="userInfo.profile.avatarUrl" alt="" />
        <div class="img-footer"></div>
        <router-link :to="{ name: 'replacePicture' }" class="opacity"
          >更换头像</router-link
        >
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { countriesCodeList, userDetail, userUpdate } from "@/api";
import $moment from "moment";
export default {
  name: "personal",
  data() {
    return {
      nameConfig: {
        error: false,
      },
      signatureConfig: {
        textCount: 300,
        error: false,
      },
      birthdayConfig: {
        year: "-",
        yearList: [],
        month: "-",
        monthList: [],
        day: "-",
        dayList: [],
      },
      config: {
        nickname: "",
        signature: "",
        // 1男 2 女  0 保密
        gender: 0,
        birthday: "",
        city: "",
        province: "",
      },
    };
  },
  watch: {
    "birthdayConfig.month"(newVal) {
      let year = this.birthdayConfig.year;

      let month = this.birthdayConfig.month;
      let result = [];
      if (
        month == 1 ||
        month == 3 ||
        month == 5 ||
        month == 7 ||
        month == 8 ||
        month == 10 ||
        month == 12
      ) {
        for (let i = 1; i <= 31; i++) {
          result.push(i < 10 ? "0" + i : i);
        }
        this.birthdayConfig.dayList = result;
      }
      if (
        ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) &&
        month == 2
      ) {
        alert(2);
        for (let i = 1; i <= 28; i++) {
          result.push(i < 10 ? "0" + i : i);
        }
        this.birthdayConfig.dayList = result;
      } else if (month == 2) {
        for (let i = 1; i <= 29; i++) {
          result.push(i < 10 ? "0" + i : i);
        }
        this.birthdayConfig.dayList = result;
      }
    },
  },
  computed: {
    ...mapGetters(["userDetails", "userInfo"]),
  },
  created() {
    this.init();
  },
  methods: {
    ...mapActions("user", ["SET_CHANGE_USER_INFO"]),
    init() {
      this.getCity();
      userDetail({ uid: this.userInfo.profile.userId }).then((data) => {
        this.SET_CHANGE_USER_INFO(data);
        this.config.nickname = data.profile.nickname;
        this.config.signature = data.profile.signature;
        this.config.gender = data.profile.gender;
        this.config.birthday = data.profile.birthday;
        this.config.city = data.profile.city;
        this.config.province = data.profile.province;

        let yyyy = $moment(this.config.birthday)
          .format("YYYY-MM-DD")
          .split("-");
        this.birthdayConfig.year = yyyy[0];
        this.birthdayConfig.month = yyyy[1];
        this.birthdayConfig.day = yyyy[2];

        for (let i = 1920; i <= 2020; i++) {
          this.birthdayConfig.yearList.push(i);
        }
        for (let i = 1; i <= 12; i++) {
          this.birthdayConfig.monthList.push(i < 10 ? "0" + i : i);
        }
        // monthList
        // dayList
      });
    },
    getCity() {
      // 只有国家编码 没有城市编码....
      // countriesCodeList().then((data) => {
      //   console.log(data, "城市");
      // });
    },
    infoChange(val) {
      if (this.config.signature.length <= 300) {
        this.signatureConfig.textCount = 300 - this.config.signature.length;
        this.signatureConfig.error = false;
      } else {
        this.signatureConfig.textCount = "字数超出";
        this.signatureConfig.error = true;
      }
    },
    nameChange(val) {
      if (
        this.config.nickname.length < 2 ||
        this.config.nickname.length > 15 ||
        !/^[\u4e00-\u9fa5|_-]+$/.test(this.config.nickname)
      ) {
        this.nameConfig.error = true;
        return;
      }
      this.nameConfig.error = false;
    },
    selectDay(val) {
      console.log(
        $moment(
          this.birthdayConfig.year +
            "-" +
            this.birthdayConfig.month +
            "-" +
            this.birthdayConfig.day
        ).valueOf()
      );
    },
    selectMonth(val) {
      this.birthdayConfig.day = "0" + 1;
      console.log(
        $moment(
          this.birthdayConfig.year +
            "-" +
            this.birthdayConfig.month +
            "-" +
            this.birthdayConfig.day
        ).valueOf()
      );
    },
    selectYear(val) {
      console.log(
        $moment(
          this.birthdayConfig.year +
            "-" +
            this.birthdayConfig.month +
            "-" +
            this.birthdayConfig.day
        ).valueOf()
      );
    },

    save() {
      console.log(this.config);
      // gender: 性别 0:保密 1:男性 2:女性
      // birthday: 出生日期,时间戳 unix timestamp
      // nickname: 用户昵称
      // province: 省份id
      // city: 城市id
      // signature：用户签名

      this.config.birthday = $moment(
        this.birthdayConfig.year +
          "-" +
          this.birthdayConfig.month +
          "-" +
          this.birthdayConfig.day
      ).valueOf();
      userUpdate(this.config).then((data) => {
        if (data.code == 200) {
          this.$Notification("修改成功", "success");
        }
      });
    },

    domClick(val, e) {
      
    },
  },
};
</script>

<style lang="scss" scoped>
.save-button {
  button {
    width: 80px;
    height: 30px;
    cursor: pointer;
    margin-left: 35px;
    margin-top: 40px;
  }
}
.userInfo {
  font-size: 12px;
  color: #333;
  .birthday {
    margin-top: 20px;
    display: flex;
    line-height: 28px;
    span {
      margin: 0 15px 0 10px;
    }
    .label-text {
      margin-right: 10px;
    }
    .select-icon {
      position: relative;
    }
    .select-icon .icon {
      content: "";
      position: absolute;
      right: 1px;
      width: 25px;
      top: 2px;
      bottom: 1px;
      z-index: 1;
      background-color: rgb(245, 245, 245);
      border-left: 1px solid rgb(212, 212, 212);
      text-align: center;
      cursor: context-menu;
      user-select: none;
      .iconfont {
        color: rgb(162, 162, 162);
      }
    }
    select {
          z-index: 2;
    opacity: 0.5;
      padding-left: 2px;
      color: #333;
      border: 1px solid rgb(212, 212, 212);
      width: 60px;
      height: 28px;
      position: relative;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
    }
  }
  .sex {
    margin-top: 20px;
    .margin-right {
      margin-right: 10px;
    }
    input {
      vertical-align: middle;
    }
    label {
      margin-left: 5px;
      vertical-align: middle;
      margin-right: 10px;
    }
  }
  .name {
    .name-border {
      border-color: #f08b8b;
      color: #c20c0c;
    }
    input {
      padding: 0 5px;
      box-sizing: border-box;
      margin-left: 10px;
      border: 1px solid #cdcdcd;
      width: 300px;
      height: 32px;
    }
    .iconfont {
      color: rgb(227, 50, 50);
      font-size: 16px;
      vertical-align: middle;
    }
    span {
      vertical-align: middle;
    }
    .name-error {
      margin-left: 37px;
      color: #e33232;
    }
  }
  .info {
    position: relative;
    margin-top: 10px;
    .warning {
      position: absolute;
      right: 20px;
      bottom: 5px;
      color: #d0d0d0;
    }
    .textarea-error {
      border: 1px solid #f08b8b !important;
      color: #c20c0c !important;
    }
    .text-area {
      height: 135px;
      line-height: 19px;
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
      box-sizing: border-box;
      padding: 10px;
      width: 300px;
      vertical-align: text-top;
      overflow: auto;
      resize: none;
      margin-left: 10px;
      border: 1px solid #cdcdcd;
    }
  }
}
.opacity {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 26px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}
.content {
  display: flex;
  .userInfo {
    width: 340px;
    margin-right: 30px;
  }
  .picture {
    .img-box {
      width: 140px;
      height: 140px;
      position: relative;
      overflow: hidden;
      img {
        width: 100%;
      }
      .img-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 26px;
        background-color: #8e8e8e;
        opacity: 0.8;
        text-align: center;
        font-size: 12px;
        color: #fff;
        line-height: 26px;
        .edit-img {
          color: #fff;
        }
      }
    }
  }
}
</style>